import React, { useEffect } from 'react'
import G6 from '@antv/g6'
import { TreeGraph } from './config'
import CommonFetch from '@/config/CommonFetch'

let graph

const Topo = ({ getGraph }) => {
  useEffect(() => {
    CommonFetch.get('/hdk/topo').then((ret) => {
      createMyG6(ret)
    })
  }, [])
  const createMyG6 = (d) => {
    const contextMenu = new G6.Menu({
      getContent(evt) {
        if (evt.item && evt.item.getType() === 'node') {
          return `
              <button id="delete">删除</button>
              <button id="add">新增</button>
              `
        }
        return ''
      },
      handleMenuClick: (target, item) => {
        const id = target.id
        switch (id) {
          case 'delete':
            graph.removeChild(item._cfg.id)
            break
          case 'add':
            graph.updateChild(
              {
                id: item._cfg.id + new Date().getTime(),
              },
              item._cfg.id
            )
            graph.fitView()

            break
          default:
            break
        }
      },
      // offsetX and offsetY include the padding of the parent container
      // 需要加上父级容器的 padding-left 16 与自身偏移量 10
      offsetX: 16 + 10,
      // 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10
      offsetY: 0,
      // the types of items that allow the menu show up
      // 在哪些类型的元素上响应
      itemTypes: ['node'],
    })
    graph = new G6.TreeGraph({ ...TreeGraph, plugins: [contextMenu] })

    graph.node((node) => {
      return {
        label: node.id,
        labelCfg: {
          position: 'bottom',
        },
        icon: {
          show: true,
          img: node.img && require(`@/../public/image/${node.img}`).default,
          // icon 的宽高
          width: 30,
          height: 30,
        },
      }
    })
    graph.on('edge:mouseenter', (e) => {
      const nodeItem = e.item // 获取鼠标进入的节点元素对象
      graph.setItemState(nodeItem, 'hover', true) // 设置当前节点的 hover 状态为 true
    })
    graph.on('edge:mouseleave', (e) => {
      const nodeItem = e.item // 获取鼠标进入的节点元素对象
      graph.setItemState(nodeItem, 'hover', false) // 设置当前节点的 hover 状态为 true
    })
    // 生产数据,存起来
    graph.data(d)
    // 渲染数据,生产布局,生成图表
    graph.render()
    // 渲染数据之后,进行自适应窗口
    graph.fitView()
    getGraph(graph)
  }
  return (
    <div>
      <div id="container"></div>
    </div>
  )
}

export default Topo
